<template>

		<el-container class='home_container'>
		<el-header class='header'>
		<div>
			<img src="../assets/homelogo.png" alt="">
			<span>电商后台管理系统</span>
			<!-- <span class="iconfont icon-icon_user"></span> -->
		</div>
			<el-button @click="logout" type="info">退出</el-button>
        </el-header>
			<el-container>
                <el-aside class="el-aside" :width="iscollapse?'64px' :'200px'">
					<div @click="toggle" class="toggle-button">|||</div>
					<!-- 侧边栏菜单 -->
                    <el-menu :default-active="activePath" router :collapse-transition="false" :collapse="iscollapse" unique-opened background-color="#333744" text-color="#fff" active-text-color="#409eff">
                        <!-- 一级菜单 -->
						<el-submenu v-for="(item) in menulist" :key="item.id" :index="item.id +''">
							<!-- 模板 -->
                            <template slot="title">
								<!-- 图标 -->
                                <i :class="iconobj[item.id]"></i>
                                <!-- 文本 -->
								<span>{{item.authName}}</span>
                            </template>
                            <!-- 二级菜单 -->
                                <el-menu-item @click="seveNavState('/'+item.path)" :key="item.id" v-for="item in item.children" :index="'/'+item.path">
									<template slot="title">
										<!-- 图标 -->
                                         <i class="el-icon-menu"></i>
                                     <!-- 文本 -->
										<span>{{item.authName}}</span>
									</template>
								</el-menu-item>
                          </el-submenu>

                    </el-menu>
               </el-aside>
			   <!-- 二级路由切换 -->
                <el-main>
					<router-view></router-view>
				</el-main>
            </el-container>
		</el-container>

</template>
<script>
import homeApi from '../request/home.js'
export default {
  data () {
    return {
      // 菜单数据
      menulist: [],
      iconobj: {
        125: 'iconfont icon-icon_user',
        103: 'iconfont icon-tijikongjian',
        101: 'iconfont icon-shangpin',
        102: 'iconfont icon-danju',
        145: 'iconfont icon-baobiao'
      },
      iscollapse: false,
      activePath: ''
    }
  },
  created () {
    this.getMenuList()
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    logout () {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    async getMenuList () {
      const { data: res } = await homeApi.homeApiMenuList() // this.$http.get('menus')
	  console.log(res)
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg)
      this.menulist = res.data
    },
    toggle () {
      this.iscollapse = !this.iscollapse
    },
    seveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  }
}
</script>

<style scoped="scoped">
	.header{
		background-color:#373d41 ;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 0;
		color: #fff;
		font-size: 20px;
	}
	.el-menu{
		border-right: none;
	}
	.header div{
		display: flex;
		align-items: center;
	}
	.header img{
		height: 60px;
		border-radius: 50%;
		margin-right: 20px;
	}
	.el-aside{
		background-color:#333744 ;
	}
	.el-main{
		background-color:#eaedf1 ;
	}
	.home_container{
		height: 100%;
	}
	.iconfont{
		margin-right: 5px;
	}
	.toggle-button{
		background-color: #4a5064;
		font-size: 10px;
		line-height: 24px;
		color: #fff;
		text-align: center;
		cursor: pointer;
	}
</style>
